@namespace AntDesign
@using Microsoft.AspNetCore.Components.Rendering
@inherits AntDomComponentBase

<CascadingValue Value="this" IsFixed="@true">

    @ChildContent

    <Template>
        @{
            this.Complete();
            if (!IsTabbedCard)
            {
                @RenderTabs
            }
        }
    </Template>
</CascadingValue>

@code {
    internal void RenderTabs(RenderTreeBuilder __builder)
    {
        <div class="@ClassMapper.Class" style="@Style" id="@Id">
            <!--Tab bar-->
            <div role="tablist" class="@_tabBarClassMapper.Class" style="@TabBarStyle">

                @if (TabBarExtraContentLeft != null)
                {
                    <div class="ant-tabs-extra-content">
                        @TabBarExtraContentLeft
                    </div>
                }

                <div class="@_tabsNavWarpPingClassMapper.Class" @ref="@_navWarpRef" id="@(Id)-nav-wrapper">
                    <div class="ant-tabs-nav-list" style="@_navListStyle" @ref="@_navListRef" id="@(Id)-nav-list">
                        @foreach (var tab in _tabs)
                        {
                            @tab.RenderTab
                        }
                        @if (HasAddButton)
                        {
                            <button type="button" class="ant-tabs-nav-add" style="@_firstAddButtonStyle" aria-label="Add tab"
                                @onclick="OnAddTab">
                                <Icon Type="plus" />
                            </button>
                        }
                        <div class="@_inkClassMapper.Class" style="@_inkStyle"></div>
                    </div>
                </div>
                <Dropdown OnVisibleChange="OnVisibleChange">
                    <Overlay>
                        <ul tabindex="0"
                            class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
                            id="@($"rc-tabs-{Id}-more-popup")" role="listbox" aria-label="expanded dropdown">
                            @foreach (var pane in _invisibleTabs)
                            {
                                <li class="ant-tabs-dropdown-menu-item @(pane.Disabled?$"ant-tabs-dropdown-menu-item-disabled":string.Empty)"
                                    id="@($"rc-tabs-{Id}-more-popup-{pane.Key}")" role="option" aria-disabled="false"
                                    aria-selected="false" aria-controls="@($"rc-tabs-{Id}-more-popup-{pane.Key}")"
                                    @onclick="(e)=>HandleTabClick(pane)">
                                    @if (pane.TabTemplate != null)
                                    {
                                        @pane.TabTemplate
                                    }
                                    else
                                    {
                                        @pane.Tab
                                    }
                                </li>
                            }
                        </ul>
                    </Overlay>
                    <Unbound>
                        <div @ref="context.Current" class="@_operationClass" @onclick:preventDefault>
                            <button tabindex="-1" class="ant-tabs-nav-more" id="rc-tabs-0-more" aria-expanded="false"
                                aria-haspopup="listbox" aria-hidden="true" aria-controls="rc-tabs-0-more-popup"
                                style="@_operationStyle" type="button">
                                <Icon Type="ellipsis" />
                            </button>
                        </div>
                    </Unbound>
                </Dropdown>
                @if (HasAddButton)
                {
                    <button type="button" class="ant-tabs-nav-add" style="@_secondAddButtonStyle" aria-label="Add tab"
                        @onclick="OnAddTab">
                        <Icon Type="plus" />
                    </button>
                }
                @if (TabBarExtraContent != null || TabBarExtraContentRight != null || (Card?.Extra != null && Card?.Title ==
                        null && Card?.TitleTemplate == null))
                {
                    <div class="ant-tabs-extra-content">
                        @(TabBarExtraContent ?? TabBarExtraContentRight ?? Card?.Extra)
                    </div>
                }
            </div>
            <!--Tab content-->
            @if (!IsTabbedCard)
            {                
                @RenderTabPanels                  
            }
        </div>

    }

    internal void RenderTabPanels(RenderTreeBuilder __builder)
    {
        <div class="ant-tabs-content-holder" @ref="@_contentHolderRef">
            <div class="@_contentClassMapper.Class">
                @foreach (var tab in _tabs)
                {
					__builder.AddContent(tab.TabIndex, tab.RenderPane);
                }
            </div>
        </div>
    }
}